<template>
<div class="header">
<h1>商品管理</h1>

<div class="her">
<img src="@/assets/logo.png" alt="">
<p>账号:{{}}</p></div>

</div>

<main>
  <div class="left">

  <el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="主页" name="1">
    
  </el-collapse-item>
  <el-collapse-item title="前台首页" name="2">
  </el-collapse-item>
  <el-collapse-item title="用户管理" name="3">
    <router-link :to="{name : 'HomeCart'}">用户列表</router-link>
  </el-collapse-item>
  <el-collapse-item title="商品" name="4">
    <div><router-link :to="{name : 'HomeShopin'}">商品管理</router-link></div>
    <div><router-link :to="{name : 'HomeLogin'}">商品分类管理</router-link></div>
    <div>商品列表</div>
    <div><router-link :to="{name : 'HomeLunbo'}">轮播图管理</router-link></div>
    <div><router-link :to="{name : 'HomeDan'}">订单管理</router-link></div>
  </el-collapse-item>
  <el-collapse-item title="营收管理" name="5">
  </el-collapse-item>
  <el-collapse-item title="文件管理" name="6">
  </el-collapse-item>
</el-collapse>



  </div>

  <div class="right">

    <div class="r1">
    <el-input v-model="input" placeholder="请输入内容"></el-input>

    <el-button color="rgb(58, 162, 231)">搜索</el-button>
    <el-button color="orange">重置</el-button><br>
    <router-link :to="{name : 'HomeZen'}"><el-button color="green">新增</el-button></router-link>
    
    </div>

    <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="商品id" >
    </el-table-column>
    <el-table-column prop="text" label="商品名称" >
    </el-table-column>
    <el-table-column prop="imgURL" label="商品图片">
    </el-table-column>
    <el-table-column prop="shoed" label="商品描述">
    </el-table-column>
    <el-table-column prop="zheko" label="折扣">
    </el-table-column>
    <el-table-column prop="sales" label="销量">
    </el-table-column>
    <el-table-column prop="sale" label="销售额">
    </el-table-column>
    <el-table-column prop="date" label="创建时间">
    </el-table-column>

    <el-table-column prop="ent" label="推荐">
        <!-- 开关 -->
    <el-switch v-model="kopp" active-color="#13ce66" inactive-color="#ff4949">
    </el-switch>

    </el-table-column>

    <el-table-column fixed="right" label="操作" width="200">
      
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button><br>
        <el-button  size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      
    </el-table-column>
  </el-table>
    
      <div class="block">
    <p>共2条</p>
  <el-pagination layout="prev, pager, next" :total="20">
  </el-pagination>
</div>
    

</div>

</main>


</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
            id:2,
            text:'墨镜',
            imgURL:require('@/assets/1jpg.jpg'),
            shoed:'抵抗紫外线',
            zheko:1,
            sales:0,
            sale:0,
            date: '2025-05-03',
        

        }],
        value: '',
        input: '',
        kopp: true
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
}
</script>

<style>
.r2{
  display: flex;
  margin: 5px;
  flex-direction: row;
}










.header{
  width: 100%;
  height: 100px;
  background-color: #2a2a33;
  color: yellow;
  display: flex;
  flex-direction: row;
  
}
.header img{
  width: 50px;
  height: 50px;
}
.her{
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: row;
}
main{
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.left{
  width: 200px;
  height: 520px;
  background-color: #2a2a33;
  display: flex;
  flex-direction: column;
}
.right{
  width: 100%;
  overflow: hidden;
}

.ga{
  display: flex;
  flex-direction: column;
}
.ga a{
  margin: 5px;
    color: white;
  text-decoration: none;
}

.one{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.one img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.one a{
  color: white;
  text-decoration: none;
}

.two{
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.two img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.two a{
  color: white;
  text-decoration: none;
}

.three{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.three img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.three a{
  color: white;
  margin: 5px;
  text-decoration: none;
}
.te{
  display: flex;
  flex-direction: column;
}

.four{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.four img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.four a{
  color: white;
  text-decoration: none;
}

.five{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.five img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.five a{
  color: white;
  text-decoration: none;
}

.six{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.six img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.six a{
  color: white;
  text-decoration: none;
}




</style>